<script lang="ts" setup>
  import { createVNode } from 'vue';
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import Button from '@sscd/button';
  import Modal from '@sscd/modal';
  const showConfirm = () => {
    for (let i = 0; i < 3; i += 1) {
      setTimeout(() => {
        Modal.confirm({
          content: 'destroy all',
          icon: createVNode(ExclamationCircleOutlined),
          onOk() {
            Modal.remove();
            return new Promise((resolve, reject) => {
              setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
            }).catch(() => console.log('Oops errors!'));
          },
          cancelText: 'Click to destroy all',
          onCancel() {
            Modal.destroyAll();
          },
        });
      }, i * 500);
    }
  };
</script>

<template>
  <div class="demo">
    <div class="demo-title">销毁确认对话框</div>
    <div class="demo-content">
      <Button @click="showConfirm">Confirm</Button>
    </div>
  </div>
</template>
